<template>
  <div>
    <ul>
      <li v-for="item in talkStore.talkList" :key="item.id">
        <p>{{ item.id }} ---{{ item.title }}</p>
      </li>
    </ul>
    <button @click="addTalk">添加</button>
  </div>
</template>
<script lang="ts">
export default {
  name: "talkLove",
};
</script>
<script setup lang="ts">
import { reactive } from "vue";
import axios from "axios";
import { nanoid } from "nanoid";
import { useTalkStore } from "@/store/talk";
const talkStore = useTalkStore();
// 订阅talkStore如果state发生变化，则将talkList存储到localStorage中
talkStore.$subscribe((mutation, state) => {
  localStorage.setItem("talkList", JSON.stringify(state.talkList));
});
async function addTalk() {
  talkStore.talkList.push({ id: nanoid(), title: "你好，我是李四" });
}
</script>

<style lang="scss" scoped></style>
